<template>
  <div o-Container>
    <div data-v-05a63665="" class="el-tabs el-tabs--top">
      <div class="el-tabs__header is-top">
        <div class="el-tabs__nav-wrap is-top">
          <div class="el-tabs__nav-scroll">
            <div role="tablist" class="el-tabs__nav is-top" style="transform: translateX(20px);">
              <div class="el-tabs__active-bar is-top"
                   v-bind:style="{width:tab.width+'px',transform: 'translateX('+tab.offset+'px)'}"></div>
              <div v-for="system in list.system" v-if="system.ParentID == 0" :key="system.ID"
                   v-on:click="changeTab($event.target,system.ID)"
                   role="tab" v-bind:class="'el-tabs__item is-top ' + (system.ID==tab.index?'is-active':'')">
                {{system.LanguageID}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <o-list v-bind:source="list.menu"
                v-bind="{created:create,modified:modify,searched:search,paged:page,exported:output}"
                v-on:subsendfather="receiveChildData"/>
      </div>
    </div>
    <o-dialog v-bind:source="panel" v-bind="{opened:load,closed:load}">
      <template slot="content">
        <o-item v-bind:source="item.language" v-bind="{validated:validate,saved:save,backed:back}"></o-item>
        <o-item v-bind:source="item.menu" v-bind="{loaded:load,changed:change,successed:success}"></o-item>
      </template>
    </o-dialog>
  </div>
</template>

<script>
  export default {
    name: "mms_platform_menu_list", // 调试时可以更友好。
    data() {
      return {
        octopus: this.$parent.octopus,
        list: {
          menu: {
            data: {
              id: 133,
              cellData: [
                {name: "SystemID", show: false, filterKey: "=", filterValue: "1"},
                {name: "LanguageID", width: "200"},
                {name: "ID", width: "50"},
                {name: "Status", searchKey: "=", width: 60},
                {name: "Sort", width: 60},
                {name: "Icon", width: 150},
                {name: "Url", searchKey: "Like", width: 300},
                {name: "Module", searchKey: "Like", width: 300},
                {name: "AuthorizationList", width: "200"},
                {name: "IsShow", width: 60},
                {name: "CreateUserID",},
                {name: "CreateDate", width: "170",}
              ],
              // height: "80%",
              minHeight: 300,
              // offsetHeight: 20
            },
            exportName: '菜单管理'
          },
          system: {data: {}},
        },
        item: {
          language: {
            // 以下参数默认由组件内部创建，但是如果有需要，开发人员可在这里提前设置，组件将按照您的预期渲染。
            // cache: false,
            // control: null,
            // dataExtend: null,
            data: {
              id: 17,
              cellData: [{name: "CN"},
                {name: "ZH"},
                {name: "EN"},
                {name: "JP"},
                {name: "KR"},
                {name: "CreateDate"}]
            },
            // 自定义button按钮，开发者选项。
            button: [{class: "warning", click: this.translate, text: "Translate"}]
          },
          menu: {
            data: {
              id: 16,
              value: "#{param=id}",//采用八爪鱼转码器翻译
              // 刷新，默认false，当为true时触发一次load刷新。
              cellData: [{name: "ParentID"},
                {name: "Icon"},
                {name: "IconColor"},
                {name: "Sort"},
                {name: "Url"},
                {name: "Module", height: 50},
                {name: "AuthorizationList"},
                {name: "IsShow",},
                {name: "LanguageID", show: false},// load: false，只加载配置，不读数据库获取数据，show: false，加载配置和从数据库获取数据，但是不渲染至DOM。
                {name: "Status"},
                {name: "CreateUserID"},
                {name: "CreateDate"}]
            },
          },
        },
        panel: {
          visible: false,
        },
        tab: {
          index: 1,
          width: 40,
          offset: 0,
        }
      }
    },
    created: function () {
      this.init();
      // this.oData 等价于 this.octopus
      this.oData.tips.debug("MenuList.vue执行了created事件。");
    },
    mounted: function () {
      this.octopus.tips.debug("MenuList.vue执行了mounted事件。");
    },
    updated: function () {
      this.octopus.tips.debug("MenuList.vue执行了updated事件。");
    },
    activated: function () {
      this.octopus.tips.debug("MenuList.vue执行了activated事件。");
    },
    methods: {
      init: function () {
        let o = this;
        // 根据权限列表寻找有授权的系统
        this.octopus.request.api.post("/Octopus/Engine/List", {
            id: 133,
            cellData: [
              {name: "ParentID", filterKey: "=", filterValue: "0"},
              {name: "LanguageID"},
            ],
            pageData: {
              index: 1,
              listSize: 11,
              rowSize: 7777//系统菜单不可能到7777个的，因为7是我的幸运数字，所以7777，哈哈哈。
            }
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              o.list.system = data.content.queryData;
            }
          });
      },
      /**
       * @method 创建方法
       *
       */
      create: function () {
        // this.octopus.router.jump("/MMS/Platform/Menu/Modify?id=" + row.ID);
        this.item.menu.data.value = null;
        this.item.menu.control.load();
        this.item.language.data.value = null;
        this.item.language.control.load();

        this.panel.visible = true;
      },
      /**
       *
       * 导出
       *
       */
      output: function (data) {
        // 导出以后，回调这里给客户端操作。
        // 核心思想是cellData包含search数据（不管有没有），回传以后发送export指令，后台api会直接返回导出的数据提供下载。
        // alert("export: get cell data is " + JSON.stringify(data));
      },
      search: function (cell) {
        // console.log("search:" + JSON.stringify(cell));
      },
      modify: function (row) {
        // this.octopus.router.jump("/MMS/Platform/Menu/Modify?id=" + row.ID);
        this.item.menu.data.value = row.ID;
        this.item.menu.control.load();
        this.panel.visible = true;
      },
      view: function (row) {
        alert("view key: " + JSON.stringify(row));
      },
      del: function (row) {
        alert("del key: " + JSON.stringify(row));
      },
      page: function (index) {
        console.log("page: " + index);
      },
      receiveChildData: function (data) {
        this.octopus.tips.debug("接收到子组件传来的数据：" + data);
      },
      ////////////////////////////////////////////// Menu菜单编辑控件 ////////////////////////////////////////////////
      load: function () {
        // 如果Menu有主键值，说明是更新动作，否则创建动作，没有的加了也白加。
        if (this.item.menu.data.value) {
          // Menu菜单加载完成后，将值赋值给语言对象
          this.item.language.data.value = $.grep(this.item.menu.data.cellData, function (value) {
            return value.name == "LanguageID";//筛选出语言ID编号
          })[0].defaultValue;
          // 这里调用控件对象的方法。
          this.item.language.control.load();
        }
      },
      validate: function (status) {
        // 找到Menu组件对象 且 控件验证自身状态为true，如果自己为false，也没有必要验证下级其他控件了。
        if (this.item.menu.control && status) {
          status = this.item.menu.control.validate();
          // this.octopus.tips.debug("从控件验证：" + status);
        }
        return status;
      },
      save: function (data) {
        if (data.status.code == 200) {
          // 在Menu数据源中找到LanguageID变量并设置
          $.grep(this.item.menu.data.cellData, function (value) {
            return value.name == "LanguageID";//筛选出语言ID编号
          })[0].defaultValue = this.item.language.data.value;
          // 执行菜单表的保存，组件内部会自动识别是创建还是更新。
          this.item.menu.control.save();

          this.octopus.tips.success(data);
          this.back();
        }
      },
      success: function (data) {
        // 查询模式
        if (data.content.type == "SELECT") {

        }
        // 更新和创建模式
        else {
          // Item编辑完，触发List控件刷新。
          this.list.menu.control.load();
        }
      },
      translate: function () {
        let o = this;
        let CN = flm("CN");
        let language = ["ZH", "EN", "JP", "KR"];
        // 如果中文有值，才进入。
        if (!this.octopus.tools.IsNullOrEmpty(CN.defaultValue)) {
          // 翻译为繁体
          this.octopus.tools.translate(CN.defaultValue, "zh", "cht", function (cht_data) {
            flm("ZH").defaultValue = cht_data;
            o.octopus.tools.translate(CN.defaultValue, "zh", "en", function (en_data) {
              flm("EN").defaultValue = en_data;
              o.octopus.tools.translate(CN.defaultValue, "zh", "jp", function (jp_data) {
                flm("JP").defaultValue = jp_data;
                o.octopus.tools.translate(CN.defaultValue, "zh", "kor", function (kr_data) {
                  flm("KR").defaultValue = kr_data;
                  // 延迟500毫秒给vue一个反应的时间。
                  setTimeout(function () {
                    // 执行保存
                    o.item.language.control.save();
                  }, 500);
                });
              });
            });
          });
        } else {
          this.octopus.tips.warning("ChineseBox is not null, Translate service failed.")
        }

        // find language module
        function flm(code) {
          return $.grep(o.item.language.data.cellData, function (value) {
            return value.name == code;//筛选出语言ID编号
          })[0]
        }
      },
      // 菜单控件 联动 语言控件
      // Item控件数据值发生变化以后触发，和save不同，此处只要数据变化就会触发，save是只有保存才会触发。
      change: function (data) {
        this.octopus.tips.debug("Menu组件值：" + data.displayName + " 改变为：" + data.defaultValue);
      },
      back: function () {
        this.panel.visible = false;
      },
      changeTab: function (dom, systemID) {
        // 如果是菜单为 10 同时 编号不等于 2 则不允许编辑该系统
        // if (systemID == 10 && this.octopus.passport.id != 2) {
        //   this.octopus.tips.warning("comming soon.");
        //   return;
        // }
        let tabDOM = $(dom);
        this.tab.index = systemID;
        this.tab.width = tabDOM.width();
        if (systemID != 1) {
          this.tab.offset = tabDOM.offset().left;
        } else {
          //ElementUI的一个缺陷，要自定义扣除20的偏移量。
          this.tab.offset = tabDOM.offset().left - 20;
        }
        this.octopus.tools.parseCell(this.list.menu.data, "SystemID").filterValue = systemID;
        this.list.menu.control.load();

      }
    },
    props: ["oData"]
  }
</script>
